<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>日常报账</title>
    <jsp:include page="../head.jsp"></jsp:include>
    <style>
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
            top: 50%;
            transform: translateY(-50%);
        }
        .img-list{
            display: flex;
            flex-flow: row wrap;
            align-content: flex-start;
        }

        .item{
            width: 100px;
            height: 100px;
            border: 1px solid gray;
            margin: 10px;
            position: relative;
        }

        .item img{
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }

        .handle{
            position: absolute;
            width: 100px;
            height: 20px;
            background: rgba(0,0,0,0.1);
            text-align: center;
            bottom: 0;
        }
        .handle:hover{
            background: rgba(0,0,0,0.2);
        }
    </style>

</head>
<body>

    <div class="layui-container">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend><b>日常报销</b></legend>
        </fieldset>

        <table class="layui-table" lay-data="{page:false,id:'daily',totalRow: true}" lay-filter="daily">
            <thead>
            <tr>
                <th lay-data="{type:'checkbox'}"></th>
                <th lay-data="{field:'dailyName', width:120,templet: '#dailyselect', unresize: true}">项目</th>
                <th lay-data="{field:'acount', width:100, edit: 'text',totalRow: true}">金额</th>
                <th lay-data="{field:'remark', edit: 'text', minWidth: 150}">描述</th>
            </tr>
            </thead>
        </table>

        <div class="layui-card">
            <div class="layui-card-header">票据照片</div>
            <div class="layui-card-body">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="imgBtn">选择</button>
                    <div class="img-list"></div>
                </div>
            </div>
        </div>

        <div style="text-align: center">
            <button class="layui-btn next" id="submit" style="width: 100px">提交</button>
        </div>
    </div>

    <script type="text/html" id="imgItem">
        <div class="item">
            <div class="handle" data-idx="">
                <i class="layui-icon layui-icon-delete" style="font-size: 20px" data-idx=""></i>
            </div>
            <img src="">
        </div>
    </script>

    <script src="static/layui/layui.js"></script>
<script>
    layui.use(['table','upload'], function() {
        var table = layui.table
            , upload = layui.upload;
        var files = {};
        var tableData;

        initTable();
        setImgitemClick()

        $('#submit').click(function () {
            var tableData = table.checkStatus('daily').data;
            if(!check(tableData)){
                return;
            }
            send(tableData);
        })

        //监听单元格编辑
        table.on('edit(daily)', function(obj){
            var old = table.cache['daily']
            table.reload('daily',{data:old})
        });

        upload.render({
            elem: '#imgBtn'
            ,url: ''
            ,auto:false
            ,multiple: true
            ,acceptMime:"image/*"
            ,accept:"images"
            ,choose: function(obj) {
                //将每次选择的文件追加到文件队列
                files = obj.pushFile();
                console.log(files)
                //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                obj.preview(function (index, file, result) {
                    var item = $($('#imgItem').html())
                    item.find('div').attr('data-idx',index)
                    item.find('i').attr('data-idx',index)
                    item.find('img').attr('src',result)
                    $('.img-list').append(item)
                });
            }
        });

        function send(tableData) {
            var data= new FormData()
            var arr = table.checkStatus('daily').data
            var total = 0;
            arr.forEach(function (obj) {
                total += parseFloat(obj.acount)
            })
            data.append("formData",JSON.stringify(arr));
            data.append("total",total);

            for (var item in files) {
                data.append("file",files[item]);
            }

            $.ajax({
                url: "/bill/daily/add",
                type: "POST",
                data: data,
                async: false,
                contentType: false,
                processData: false,
                error: function () {
                    layer.msg('网络超时',{icon:5});
                },
                success: function (data) {
                    layer.msg('成功',{icon:6,time:1000},function () {
                        resetPage()
                    });
                }
            })
        }

        function check(tableData) {
            var flag = true;
            console.log(tableData)
            if(tableData.length == 0){
                layer.msg("请选择申请项目",{icon:8,time:1000})
                flag = false;
            }

            tableData.forEach(function (item) {
                if(!item.acount){
                    layer.msg("请填写金额",{icon:8,time:1000})
                    flag = false;
                    throw new Error("breakForEach");
                }
            })

            return flag;
        }

        function initTable() {
            $.get('/bill/daily/list',function (res) {
                if(res.code == 200){
                    tableData = res.data;
                    table.reload('daily',{data:tableData})
                }
            })
        }

        function resetPage() {
            $('.img-list').children().remove()
            table.reload('daily',{data:tableData})
        }

        function setImgitemClick(){
            $('.img-list').click(function (e) {
                var target = $(e.target)
                if(target.hasClass('handle') || target.hasClass('layui-icon')){
                    var dataIdx = target.attr('data-idx')
                    delete files[dataIdx];
                    target.parents('.item').remove()
                }
            })
        }
    })
</script>
</body>
</html>
